<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../JavaScript/vue.js"></script>
<script>
    /*
    * 关于VueComponent:
        1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
        2.我们只需要写<school/>或<schoolx/school>，Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的: new VueComponent(options)。
        3.特别注意: 每次调用Vue.extend，返回的都是一个全新的VueComponent!!! !
        4.关于this指向:
             (1).组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是[VueComponent实例对象
             (2).new Vue()配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是[Vue实例对象]
        5.VueComponent的实例对象，以后简称vc (也可称之为: 组件实例对象)。
        6.Vue的实例对象，以后简称vm。
    * */
    const School = Vue.extend({
        template: `
          <div class="schoolBox">
          <h1>学校名字：{{ schoolName }}</h1>
          <h1>学校地址：{{ schoolAddress }}</h1>
          </div>
        `,
        data() {
            return {schoolName: "尚硅谷", schoolAddress: "北京",}
        }
    })

    const vm = new Vue({
        el: "#app",
        template: `
          <div class="app">
          <School></School>
          </div>`
        ,
        components: {School}
    })
    console.log(School)

    /*
    * ƒ VueComponent(options) {
              this._init(options);
          }
    * */
</script>
</body>
</html>
